import createModulePage from "../../../components/modulepage/index";
import { KxAppSubModule} from "../submodule";
import { HttpTaskTraits } from "../traits/http";
import { DatepickerTraits } from "../traits/datepicker";

import { genForm, genFormValidate } from "../../../../ui/form/validate";
import { defineFormRules, resetForm } from "../../../../ui/form/form";
import { subDays } from 'date-fns'
import { createFormGroup } from "../../../components/form/index";

import { AuiInputDaterange } from "../../../../ui/form/input-daterange.component";

import { pageName, refName } from "./variable";

AuiInputDaterange.install();

export var formField = {
    "name1": {
        validate: {
            presence: true,
        }
    },
    "name2": {
        validate: {
            presence: true,
        }
    },
};

var daterange = `
    <h5>Daterange</h5>
    <div>{{form.data.name2.value}}</div>
    ${createFormGroup("",
    `aui-required=""`,
    `日期`,
    `
    <aui-input-daterange 
        ref="range"
        :startDate="private_formRange.startDate"
        :endDate="private_formRange.endDate" 
        @datechange="onRangreDateChange"                       
        ></aui-input-daterange>
`,
    ``,
    ``
)}  
    <pre><code class="language-js">import { AuiInputDaterange } from "../../../../ui/form/input-daterange.component";
AuiInputDaterange.install();   
</code></pre>
`;

class Module extends KxAppSubModule {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
    <div ref="${refName}" class="action app-action">
    </div>  
    <h5>Datepicker</h5>
    <div>{{form.data.name1.value}}</div>
    ${createFormGroup("",
            `aui-required=""`,
            `日期`,
            `
        <aui-input-datepicker 
    v-model="private_${pageName}_datepicker.value"
    @dateselect="private_${pageName}_datepicker.onDateSelect"
    ></aui-input-datepicker>
`,
            ``,
            ``
        )}   
    <pre><code class="language-js">import { DatepickerTraits } from "../traits/datepicker";
new DatepickerTraits(instance, name)    
</code></pre>
     <div>DatepickerTraits 实例化后 生成一个内部调用对象</div>
     <h5>属性</h5>
     <div>
     <table>
     <tbody>
     <tr><th>属性名</th><th>功能</th><th>演示</th></tr>
     <tr><td>onChange</td><td>date值改变回调</td><td>
<pre><code class="language-js">onChange = function(formatedValue) {
    // like 2017-9-13
}</code></pre>      
</td></tr>
</tbody>
</table>
</div>
    ${daterange}
</div>`;
    }   
    
    _traits(instance) {
        return [ 
            new HttpTaskTraits(instance, `private_${pageName}_traits`),
            new DatepickerTraits(instance, `private_${pageName}_datepicker`)
        ]
    }

    _mounted() {        
        var self = this;         
        self[`private_${pageName}_traits`].init({
            onError: function (error) {
                if (self.$refs[refName]) {
                    window.app.onError(error)
                }
            }
        });

        genFormValidate(self, "form");

        setTimeout(function () {
            self.search();
        }, 0);

        self[`private_${pageName}_datepicker`].onChange = function (formatedValue) {
            self.form.setDataByMap({
                name1: formatedValue
            })
        };
        self.form.setDataByMap({
            name1: self[`private_${pageName}_datepicker`].getFormatValue()
        });

        window.AUIPrism.highlightAll();
    }
    _methods(instance) {
        return {
            search(page = 1) {
                var self = this;
            },
            onSearch(data) {
                var self = this;
                self.search();
            },
            onPageChange(page) {
                var self = this;
                self.search(page);
            },
            onRangreDateChange(startDate, endDate) {
                this.private_formRange = {
                    startDate: startDate,
                    endDate: endDate
                };
            },
        }
    }
    _data() {
        var ret = {};

        ret.private_formRange = {
            startDate: subDays(new Date(), 7),
            endDate: new Date()
        };

        ret.formFields = defineFormRules(formField);
        ret.form = genForm(ret.formFields, Object.keys(ret.formFields));

        return ret;
    }  
}

window.AUICustomComponents.define(`kx-app-${pageName}-module`, Module);

export default createModulePage(
    `<kx-app-${pageName}-module></kx-app-${pageName}-module>`
);